<template>
  <div class="community-page">
    <!-- 顶部 Banner -->
    <PageBanner
      title="旅行社区"
      subtitle="分享你的旅行故事，结识志同道合的旅伴"
      icon="🌍"
      background-image="https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=1920&q=80"
      height="350px"
    >
      <template #extra>
        <el-button type="primary" size="large" class="publish-btn" @click="goToPublish">
          <el-icon><Edit /></el-icon>
          发布动态
        </el-button>
      </template>
    </PageBanner>

    <!-- Tab 切换 -->
    <div class="container">
      <div class="tabs-bar">
        <div
          v-for="tab in tabs"
          :key="tab.id"
          class="tab-item"
          :class="{ active: activeTab === tab.id }"
          @click="activeTab = tab.id"
        >
          <span class="tab-icon">{{ tab.icon }}</span>
          <span class="tab-name">{{ tab.name }}</span>
        </div>
      </div>
    </div>

    <!-- 内容区 -->
    <div class="container">
      <div class="content-layout">
        <!-- 左侧动态流 -->
        <div class="posts-feed" v-loading="loading">
          <div v-for="post in filteredPosts" :key="post.id" class="post-card" @click="goToDetail(post.id)">
            <!-- 用户信息 -->
            <div class="post-header">
              <img :src="post.author.avatar" :alt="post.author.name" class="author-avatar" />
              <div class="author-info">
                <div class="author-name">{{ post.author.name }}</div>
                <div class="post-time">{{ post.time }}</div>
              </div>
              <el-button text class="follow-btn">+ 关注</el-button>
            </div>

            <!-- 动态内容 -->
            <div class="post-content">
              <h3 v-if="post.title" class="post-title">{{ post.title }}</h3>
              <p class="post-text">{{ post.content }}</p>
              
              <!-- 图片网格 -->
              <div v-if="post.images" class="post-images" :class="`images-${post.images.length}`">
                <img
                  v-for="(img, index) in post.images"
                  :key="index"
                  :src="img"
                  :alt="`图片${index + 1}`"
                  class="post-image"
                />
              </div>

              <!-- 位置标签 -->
              <div v-if="post.location" class="post-location">
                <el-icon><Location /></el-icon>
                {{ post.location }}
              </div>
            </div>

            <!-- 互动栏 -->
            <div class="post-actions">
              <div class="action-item">
                <el-icon><Star /></el-icon>
                <span>{{ post.likes }}</span>
              </div>
              <div class="action-item">
                <el-icon><ChatDotRound /></el-icon>
                <span>{{ post.comments }}</span>
              </div>
              <div class="action-item">
                <el-icon><Share /></el-icon>
                <span>分享</span>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧边栏 -->
        <aside class="community-sidebar">
          <!-- 热门话题 -->
          <div class="sidebar-card">
            <h3 class="card-title">🔥 热门话题</h3>
            <div class="topics-list">
              <div v-for="topic in hotTopics" :key="topic.id" class="topic-item">
                <div class="topic-info">
                  <div class="topic-name">#{{ topic.name }}</div>
                  <div class="topic-count">{{ topic.posts }}条动态</div>
                </div>
                <div class="topic-trend">{{ topic.trend }}</div>
              </div>
            </div>
          </div>

          <!-- 推荐用户 -->
          <!-- <div class="sidebar-card">
            <h3 class="card-title">👥 推荐关注</h3>
            <div class="users-list">
              <div v-for="user in recommendUsers" :key="user.id" class="user-item">
                <img :src="user.avatar" :alt="user.name" class="user-avatar" />
                <div class="user-info">
                  <div class="user-name">{{ user.name }}</div>
                  <div class="user-desc">{{ user.followers }}粉丝</div>
                </div>
                <el-button size="small" type="primary" text>关注</el-button>
              </div>
            </div>
          </div> -->

          <!-- 活动推荐 -->
          <!-- <div class="sidebar-card">
            <h3 class="card-title">🎉 精彩活动</h3>
            <div class="activities-list">
              <div v-for="activity in activities" :key="activity.id" class="activity-item">
                <img :src="activity.cover" :alt="activity.title" />
                <div class="activity-info">
                  <div class="activity-title">{{ activity.title }}</div>
                  <div class="activity-time">{{ activity.time }}</div>
                </div>
              </div>
            </div>
          </div> -->
        </aside>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { Edit, Location, Star, ChatDotRound, Share } from '@element-plus/icons-vue'
import PageBanner from '@/components/common/PageBanner.vue'
// import { getCommunityPosts } from '@/api/travel/index.js'

const router = useRouter()
const activeTab = ref('recommend')
const loading = ref(false)

// Tab 数据
const tabs = ref([
  { id: 'recommend', name: '推荐', icon: '⭐' },
  { id: 'follow', name: '关注', icon: '👥' },
  { id: 'travel', name: '游记', icon: '✍️' },
  { id: 'photo', name: '摄影', icon: '📷' },
  { id: 'qa', name: '问答', icon: '💬' }
])

// 动态数据
const posts = ref([
  {
    id: 1,
    type: 'travel',
    author: {
      name: '旅行摄影师小明',
      avatar: 'https://i.pravatar.cc/150?img=31'
    },
    time: '2小时前',
    title: '川西秘境 | 一场说走就走的自驾之旅',
    content: '从成都出发，沿着318国道一路向西，经过康定、新都桥、稻城亚丁...每一处风景都让人流连忘返。特别是清晨的新都桥，云雾缭绕，美得像一幅画。',
    images: [
      'https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80',
      'https://images.unsplash.com/photo-1519904981063-b0cf448d479e?w=600&q=80',
      'https://images.unsplash.com/photo-1585859695919-c6c4e0c4e5e5?w=600&q=80'
    ],
    location: '四川·稻城亚丁',
    likes: 1234,
    comments: 89
  },
  {
    id: 2,
    type: 'photo',
    author: {
      name: '风光摄影师',
      avatar: 'https://i.pravatar.cc/150?img=32'
    },
    time: '5小时前',
    title: null,
    content: '日出时分的漓江，云雾缭绕，渔船点点，美得不真实。这就是桂林山水甲天下的魅力所在。',
    images: [
      'https://images.unsplash.com/photo-1585859695919-c6c4e0c4e5e5?w=800&q=80'
    ],
    location: '广西·桂林',
    likes: 2156,
    comments: 156
  },
  {
    id: 3,
    type: 'travel',
    author: {
      name: '吃货小陈',
      avatar: 'https://i.pravatar.cc/150?img=33'
    },
    time: '1天前',
    title: '成都美食打卡 | 3天吃遍30家馆子',
    content: '作为一个资深吃货，这次成都之行简直太满足了！从苍蝇馆子到网红店，从火锅到串串，每一家都让人回味无穷。特别推荐小龙坎火锅和冒椒火辣！',
    images: [
      'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=600&q=80',
      'https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=600&q=80',
      'https://images.unsplash.com/photo-1565299624946-b28f40a0ae38?w=600&q=80',
      'https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?w=600&q=80'
    ],
    location: '四川·成都',
    likes: 3421,
    comments: 234
  },
  {
    id: 4,
    type: 'qa',
    author: {
      name: '旅行规划师',
      avatar: 'https://i.pravatar.cc/150?img=34'
    },
    time: '2天前',
    title: '第一次去西藏需要注意什么？',
    content: '很多朋友问我去西藏的注意事项，这里统一回复一下：1. 提前一周服用红景天 2. 到达后前两天不要洗澡 3. 多喝水多休息 4. 带好防晒用品 5. 准备好高反药物。最重要的是保持良好的心态！',
    images: null,
    location: null,
    likes: 876,
    comments: 67
  },
  {
    id: 5,
    type: 'photo',
    author: {
      name: '海岛控',
      avatar: 'https://i.pravatar.cc/150?img=35'
    },
    time: '3天前',
    title: null,
    content: '三亚的海真的太美了！蓝天白云，碧海银沙，这才是度假该有的样子。',
    images: [
      'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=600&q=80',
      'https://images.unsplash.com/photo-1476514525535-07fb3b4ae5f1?w=600&q=80'
    ],
    location: '海南·三亚',
    likes: 1567,
    comments: 123
  }
])

// 筛选后的动态
const filteredPosts = computed(() => {
  if (activeTab.value === 'recommend') {
    return posts.value
  }
  return posts.value.filter(p => p.type === activeTab.value)
})

// 热门话题
const hotTopics = ref([
  { id: 1, name: '川西秘境', posts: '12.5k', trend: '🔥' },
  { id: 2, name: '三亚旅游', posts: '8.9k', trend: '📈' },
  { id: 3, name: '成都美食', posts: '15.2k', trend: '🔥' },
  { id: 4, name: '西藏自驾', posts: '6.7k', trend: '📈' },
  { id: 5, name: '丽江古城', posts: '9.3k', trend: '🔥' }
])

// 推荐用户
const recommendUsers = ref([
  { id: 1, name: '旅行摄影师', avatar: 'https://i.pravatar.cc/150?img=41', followers: '12.5k' },
  { id: 2, name: '美食探店达人', avatar: 'https://i.pravatar.cc/150?img=42', followers: '8.9k' },
  { id: 3, name: '自驾游老司机', avatar: 'https://i.pravatar.cc/150?img=43', followers: '15.2k' },
  { id: 4, name: '穷游背包客', avatar: 'https://i.pravatar.cc/150?img=44', followers: '6.7k' }
])

// 活动推荐
const activities = ref([
  {
    id: 1,
    title: '春季赏花摄影大赛',
    cover: 'https://images.unsplash.com/photo-1490750967868-88aa4486c946?w=300&q=80',
    time: '3月15日-4月15日'
  },
  {
    id: 2,
    title: '夏日海岛打卡活动',
    cover: 'https://images.unsplash.com/photo-1559827260-dc66d52bef19?w=300&q=80',
    time: '6月1日-8月31日'
  }
])

// 跳转到详情页
const goToDetail = (id) => {
  router.push(`/community/${id}`)
}

// 跳转到发布页面
const goToPublish = () => {
  router.push('/community/publish')
}

// 加载动态列表
const loadPosts = async () => {
  loading.value = true
  try {
    // TODO: 调用API
    // const res = await getCommunityPosts({
    //   type: activeTab.value === 'recommend' ? '' : activeTab.value,
    //   page: 1,
    //   pageSize: 20
    // })
    // posts.value = res.data.list
    
    await new Promise(resolve => setTimeout(resolve, 300))
  } catch (error) {
    console.error('加载失败:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadPosts()
})
</script>

<style scoped lang="less">
.community-page {
  min-height: 100vh;
  background: #f0f2f5;
}

// 发布按钮
.publish-btn {
  padding: 14px 40px;
  border-radius: 50px;
  background: #fff;
  color: #ff6b6b;
  border: none;
  font-weight: 600;
  font-size: 16px;
  margin-top: 32px;

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  }
}

// 容器
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
}

// Tab 栏
.tabs-bar {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  padding: 20px 0;
  margin: 32px 0 0 0;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  overflow-y: hidden;

  &::-webkit-scrollbar {
    height: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(255, 107, 107, 0.3);
    border-radius: 3px;

    &:hover {
      background: rgba(255, 107, 107, 0.5);
    }
  }
}

.tab-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 15px;
  font-weight: 500;
  color: #666;
  white-space: nowrap;
  flex-shrink: 0;

  &:hover {
    background: rgba(255, 107, 107, 0.1);
    color: #ff6b6b;
  }

  &.active {
    background: linear-gradient(135deg, #ff6b6b 0%, #ff8e53 100%);
    color: #fff;
    font-weight: 600;
  }

  .tab-icon {
    font-size: 18px;
  }
}

// 内容布局
.content-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  padding-bottom: 80px;
  margin-top: 32px;
}

// 动态流
.posts-feed {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.post-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }

  .post-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;

    .author-avatar {
      width: 48px;
      height: 48px;
      border-radius: 50%;
      object-fit: cover;
    }

    .author-info {
      flex: 1;
    }

    .author-name {
      font-size: 15px;
      font-weight: 600;
      color: #1a1a1a;
      margin-bottom: 4px;
    }

    .post-time {
      font-size: 13px;
      color: #999;
    }

    .follow-btn {
      color: #ff6b6b;
      font-weight: 600;
    }
  }

  .post-content {
    margin-bottom: 16px;

    .post-title {
      font-size: 18px;
      font-weight: 600;
      color: #1a1a1a;
      margin: 0 0 12px 0;
      line-height: 1.4;
    }

    .post-text {
      font-size: 15px;
      color: #333;
      line-height: 1.7;
      margin: 0 0 16px 0;
    }

    .post-images {
      display: grid;
      gap: 8px;
      border-radius: 12px;
      overflow: hidden;
      margin-bottom: 12px;

      &.images-1 {
        grid-template-columns: 1fr;

        .post-image {
          max-height: 400px;
        }
      }

      &.images-2 {
        grid-template-columns: repeat(2, 1fr);

        .post-image {
          height: 250px;
        }
      }

      &.images-3 {
        grid-template-columns: repeat(3, 1fr);

        .post-image {
          height: 200px;
        }
      }

      &.images-4 {
        grid-template-columns: repeat(2, 1fr);

        .post-image {
          height: 200px;
        }
      }

      .post-image {
        width: 100%;
        object-fit: cover;
        cursor: pointer;
        transition: transform 0.3s ease;

        &:hover {
          transform: scale(1.02);
        }
      }
    }

    .post-location {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 6px 12px;
      background: rgba(255, 107, 107, 0.1);
      color: #ff6b6b;
      border-radius: 20px;
      font-size: 13px;
    }
  }

  .post-actions {
    display: flex;
    gap: 32px;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);

    .action-item {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #999;
      font-size: 14px;
      cursor: pointer;
      transition: all 0.3s ease;

      &:hover {
        color: #ff6b6b;
      }
    }
  }
}

// 侧边栏
.community-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-card {
  background: #fff;
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0 0 16px 0;
}

// 热门话题
.topics-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.topic-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(255, 107, 107, 0.05);
  }

  .topic-info {
    flex: 1;
  }

  .topic-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
  }

  .topic-count {
    font-size: 12px;
    color: #999;
  }

  .topic-trend {
    font-size: 20px;
  }
}

// 推荐用户
.users-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.user-item {
  display: flex;
  align-items: center;
  gap: 12px;

  .user-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
  }

  .user-info {
    flex: 1;
  }

  .user-name {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
  }

  .user-desc {
    font-size: 12px;
    color: #999;
  }
}

// 活动推荐
.activities-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.activity-item {
  display: flex;
  gap: 12px;
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    transform: translateX(4px);
  }

  img {
    width: 80px;
    height: 80px;
    border-radius: 12px;
    object-fit: cover;
  }

  .activity-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .activity-title {
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 6px;
  }

  .activity-time {
    font-size: 12px;
    color: #999;
  }
}

// 响应式
@media (max-width: 1200px) {
  .content-layout {
    grid-template-columns: 1fr;
  }

  .community-sidebar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .tabs-bar {
    justify-content: flex-start;
    padding: 16px 0;
    margin: 24px 0 0 0;

    &::-webkit-scrollbar {
      display: none;
    }
  }

  .community-sidebar {
    grid-template-columns: 1fr;
  }

  .post-images {
    &.images-3 {
      grid-template-columns: repeat(2, 1fr);

      .post-image:last-child {
        grid-column: 1 / -1;
      }
    }
  }
}
</style>
